<template>
  <div
    v-loading="loadingApp"
    class="main-app"
  >
    <div class="search">
      <el-form :inline="true" :model="formInline" class="demo-form-inline" style="height: 36px;">
        <el-form-item label="工单编号" style="font-weight: unset;">
          <el-input v-model="formInline.name" type="seatch" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getpoint"> <i class="el-icon-search" style="padding-right: 3px;" />查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div v-loading="loading" class="result">
      <div class="buttonoper">
        <el-button type="warning" class="btton1" @click="dilong = true"><i class="el-icon-circle-plus-outline" /> 新建</el-button>
      </div>
      <template>
        <el-table
          empty-text="暂无数据"
          :data="newGoodlist.currentPageRecords"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            label="序号"
            width="120"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="name"
            label="区域名称"
            width="300"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="nodeCount"
            label="点位数"
            width="300"
            align="center"
            header-align="center"
          />
          <el-table-column
            prop="remark"
            label="备注说明"
            width="350"
            align="center"
            header-align="center"
          />
          <el-table-column
            width="300"
            label="操作"
            align="center"
            header-align="center"
          >
            <template slot-scope="scope">
              <a style="color: #5f84ff;" @click="addchang(scope.row)">查看详情</a> &nbsp;
              <a style="color: #5f84ff;" @click="changDilong(scope.row)">修改</a>  &nbsp;
              <a style="color:red;" @click="delerow(scope.row)">删除</a>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <div class="bottter">
        <div class="left11">
          <div>共 <span> {{ newGoodlist.totalCount }} </span>条数据 第 <span>{{ newGoodlist.pageIndex }}</span> / <span>{{ newGoodlist.totalPage }}</span> 页  </div>
        </div>
        <div class="right22">
          <el-button class="right22button" :disabled="newGoodlist.pageIndex <= 1" @click="[loading = true,getpoint(0)]">上一页</el-button>
          <el-button class="right22button" :disabled="newGoodlist.pageIndex >= newGoodlist.totalPage" @click="[loading = true,getpoint(1)]">下一页</el-button>
        </div>
      </div>
    </div>
    <pointa v-if="dilong" ref="fff" :changlist="chiList" :dialog-visible.sync="dilong" @changeget="getpoint" />
    <addlist v-if="dialogVi" :changelist="addlist" :dialog-visi.sync="dialogVi" />
  </div>
</template>

<script>
import pointa from './pointa.vue'
import addlist from './addlist.vue'
import { getpointListApi, deleregionApi } from '@/api'
export default {
  name: 'Mainindex',
  components: { pointa, addlist },
  data() {
    return {
      dilong: false,
      newGoodlist: [],
      formInline: {
        name: ''
      },
      loading: false,
      loadingApp: true,
      pageIndex: 1,
      chiList: {},
      addlist: '',
      dialogVi: false

    }
  },
  computed: {

  },
  watch: {
    stateend() {
      this.loading = false
    },
    dilong() {
      if (this.dilong === false) this.chiList = {}
    }
  },
  async created() {
    await this.getpoint()
    this.loadingApp = false
  },
  methods: {
    // 点位查找
    addchang(a) {
      this.dialogVi = true
      this.addlist = a
    },
    // 删除
    async delerow(a) {
      try {
        this.loadingApp = true
        await deleregionApi(a.id)
        this.$message.success('删除成功')
        this.getpoint()
      } catch (error) {
        this.$message.error('区域下存在点位，不能删除')
      } finally {
        this.loadingApp = false
      }
    },
    // 获取数据
    async getpoint(a) {
      if (a === 0) {
        --this.pageIndex
      } else if (a === 1) {
        ++this.pageIndex
      }
      const par = {
        pageIndex: this.pageIndex,
        name: this.formInline.name
      }
      const { data } = await getpointListApi(par)
      this.newGoodlist = data
      this.loading = false
      if (data.totalCount > 0 && data.currentPageRecords.length === 0) {
        --this.pageIndex
        this.getpoint()
      }
    },
    // 修改数据
    changDilong(a) {
      this.dilong = true
      this.chiList = a
    }

  }
}
</script>

  <style lang="scss">
    .bottter{
      margin-top: 40px;
      display: flex;
      justify-content:space-between;
      .left11{
        font-size: 16px;
        color: #999;
      }
      .right22button{
        height: 30px;
        padding: 0;
       padding-left: 10px;
       padding-right: 10px;
      }
    }
  .buttonoper{
      margin-bottom: 6px;
  }
  .el-table__header-wrapper{
          th{
             padding: 5px 0;
             background-color: rgb(243, 246, 251) !important;
      }
  }

  .btton1{
      display: flex;
      display: inline-block;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 80px!important;
      height: 36px;
      padding: 0;
      background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
      border: none;
  }
  .button11{
      display: flex;
      display: inline-block;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 80px!important;
      height: 36px;
      padding: 0;
      background-color: #fbf4f0!important;
      border: none;
      color: #655b56!important;
  }
  .el-form-item__label{
      font-weight: 400 !important;
      color: unset !important;
  }
  </style>
  <style scoped lang="scss">
  .main-app{

      overflow: hidden;
      margin: 20px;
      .search{
          display: flex;
          overflow: hidden;
      height: 64px;
      -webkit-box-align: center;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 17px;
      background-color: #fff;
      }
      .result{
          height: 673px;
          padding:20px;
          background-color: #fff;
      }
  }

  </style>

